<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>修改密码</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片 -->
		<el-card class="box-card">
			<!-- 表单 -->
			<el-form :model="dataForm" :rules="FormRules" ref="FormRef" label-width="100px">
				<el-form-item label="旧密码" prop="jpwd">
					<el-input type="password" v-model="dataForm.jpwd"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="xpwd">
					<el-input type="password" v-model="dataForm.xpwd"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="cpwd">
					<el-input type="password" v-model="dataForm.cpwd"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm()">立即修改</el-button>
					<el-button @click="resetForm()">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.dataForm.xpwd) {
				callback(new Error('两次输入密码不一致!'))
			} else {
				callback()
			}
		}
		return {
			dataForm: {
				jpwd: '',
				xpwd: '',
				cpwd: ''
			},
			FormRules: {
				jpwd: [
					{ required: true, message: '请输入旧密码', trigger: 'blur' }
				],
				xpwd: [
					{ required: true, message: '请输入新密码', trigger: 'blur' }
				],
				cpwd: [
					{
						validator: validatePass2,
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		submitForm() {
			this.$refs.FormRef.validate(valid => {
				if (valid) {
					this.$get('/api/User/EditPwd', {
						OldPwd: this.dataForm.jpwd,
						NewPwd: this.dataForm.xpwd
					})
						.then(res => {
							console.log(res)
							if (res.success) {
								this.$message({
									type: 'success',
									message: res.msg
								})
							} else {
								this.$message.error(res.msg)
							}
						})
						.catch(err => {
							console.log(err)
						})
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		resetForm() {
			this.$refs.FormRef.resetFields()
		}
	}
}
</script>

<style scoped>
.el-input {
	max-width: 360px;
}
</style>